<template>
  <div class="">
    <!-- dialog 组件  -- 是容器组件 用到定位 不会影响父组件中的布局
          需要 form 表单组件

          因为新增和修改 共同使用这个组件
          我们需要区分当前展示的 是新增模态框 还是 修改模态框 -- 父组件传来的参数
          点击确定的时候 调用不同的接口 -- 新增医生信息接口 或者 修改医生信息接口
     -->

    <el-dialog
        v-model="dialogVisible"
        :title="doctorInfoForm.id==0?'新增':'修改'"
        width="500"
        :close-on-click-modal="false"
        class="dialog"
    >

      <el-scrollbar height="400px">

        <el-form ref="doctorForm" :rules="rules" :model="doctorInfoForm" label-width="80px">

          <el-form-item label="姓名" prop="name">
            <el-input v-model="doctorInfoForm.name" clearable></el-input>
          </el-form-item>

          <el-form-item label="身份证号" prop="pid">
            <el-input v-model="doctorInfoForm.pid" clearable></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="doctorInfoForm.sex">
              <el-radio-button label="男" value="男" />
              <el-radio-button label="女" value="女" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
                v-model="doctorInfoForm.birthday"
                type="date"
                placeholder="出生日期"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item label="毕业院校" prop="school">
            <el-input v-model="doctorInfoForm.school" clearable></el-input>
          </el-form-item>

          <el-form-item label="学历" prop="degree">
            <el-radio-group v-model="doctorInfoForm.degree">
              <el-radio-button label="博士" value="博士" />
              <el-radio-button label="研究生" value="研究生" />
              <el-radio-button label="本科" value="本科" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="电话" prop="tel">
            <el-input v-model="doctorInfoForm.tel" clearable></el-input>
          </el-form-item>

          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="doctorInfoForm.address" clearable></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="doctorInfoForm.email" clearable></el-input>
          </el-form-item>

          <el-form-item label="职务" prop="job" >
            <el-select v-model="doctorInfoForm.job" clearable>
              <el-option value="主任医师" label="主任医师"></el-option>
              <el-option value="副主任医师" label="主任医师"></el-option>
              <el-option value="主治医师" label="主治医师"></el-option>
              <el-option value="副主治医师" label="副主治医师"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="科室部门" prop="subId">
            <!-- 级联选择器 -->
            <el-cascader
                clearable
                v-model="doctorInfoForm.subId"
                :options="options"
                :props="{
                  value:'subId',
                  label:'subName'
                }"
                @change="change"
            />
          </el-form-item>

          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="doctorInfoForm.remark" clearable></el-input>
          </el-form-item>

          <el-form-item label="医生介绍" prop="description">
            <el-input
                type="textarea"
                v-model="doctorInfoForm.description"
                clearable
                :rows="6"
                maxlength="350"
                show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="入职日期" prop="hiredate">
            <el-date-picker
                v-model="doctorInfoForm.hiredate"
                type="date"
                placeholder="入职日期"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 标签 需要调正 -->
          <el-form-item label="标签" prop="tag">
            <el-input v-model="newTag" @keyup.enter="tagPush" clearable></el-input>
            <p>
              <el-tag
                  v-for="(item,index) in doctorInfoForm.tag"
                  :key="index"
                  closable
                  @close="closeTag(index)"
                  class="add_tag"
              >{{ item }}</el-tag>
            </p>
          </el-form-item>

          <el-form-item label="推荐等级" prop="recommended">
            <el-radio-group v-model="doctorInfoForm.recommended">
              <el-radio-button label="优先" :value="true" />
              <el-radio-button label="非优先" :value="false" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="doctorInfoForm.status">
              <el-radio-button label="在职" :value="1" />
              <el-radio-button label="离职" :value="2" />
              <el-radio-button label="退休" :value="3" />
            </el-radio-group>
          </el-form-item>

        </el-form>
        <button @click="show">展示</button>

      </el-scrollbar>

      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit(doctorForm)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, nextTick, markRaw} from "vue";
import {ElMessage} from "element-plus";
import {selectDeptAndSub} from '@/api/dept'
import {insertDoctorInfo,selectDoctorInfo,updateDoctorInfo} from '@/api/care'


let dialogVisible = ref(false);

const resetForm = () => {
  if (!doctorForm.value) return
  doctorForm.value.resetFields()  //重置该表单项，将其值重置为初始值，并移除校验结果
  newTag.value = '' //标签表单中的文本框
  doctorInfoForm.value.tag = [] // 标签表单中的tag标签
}

const init = (id)=>{
  resetForm()
  doctorInfoForm.value.id = id || 0;    //如果 id 是“真值”（truthy），也就是说 id 不是 false、0、""（空字符串）、null、undefined、NaN 或其他被转换为 false 的值，
                                        //那么整个表达式的结果就是 id 的值。如果 id 是“假值”（falsy），那么整个表达式的结果就是 0。
  dialogVisible.value = true

  nextTick(async ()=>{  // 确保渲染完毕后调用接口，回显数据
    if (doctorInfoForm.value.id != 0) {
      let res = await selectDoctorInfo({id: id})
      console.log(res);
      res.subId = [res.deptName, res.deptSubId];
      doctorInfoForm.value = res;
    }
  })
}
defineExpose({init})  // 使其可以在父组件中被访问


let doctorInfoForm = ref({
  "id": 0,
  "name": "",
  "pid": "",
  "sex": "男",
  "birthday": "",
  "school": "",
  "degree": "本科",
  "tel": "",
  "address": "",
  "job": "",
  "subId": '',     // 将来添加或修改时 传参格式需要调整 级联选择器返回的数组格式(取出门诊对应的id值)
  "email": "",
  "remark": "",  // 备注信息
  "description": "",
  "hiredate": "",  // 入职日期
  "tag": [],
  "recommended": true,
  "status": 1
})

// 表单的校验规则
let rules = reactive({
  name: [
    {required: true, message: '姓名不能为空'},
    {
      pattern: '^[\\u4e00-\\u9fa5]{2,20}$',  // 正则表达式 自定义的校验规则
      message: '姓名格式错误'
    }
  ],
  pid: [
    {required: true, message: '身份证号不能为空'},
    {
      pattern:
          '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
      message: '身份证号不正确'
    }
  ],
  birthday: [{required: true, message: '出生日期不能为空'}],

  school: [{required: true, message: '毕业学校不能为空'}],
  tel: [
    {required: true, message: '电话不能为空'},
    {
      pattern: '^1[1-9][0-9]{9}$',
      message: '电话格式错误'
    }
  ],
  address: [{required: true, message: '家庭住址不能为空'}],
  job: [{required: true, message: '职务不能为空'}],
  subId: [{required: true, message: '科室部门不能为空'}],
  email:[
    {required:true,message:'邮箱不能为空'},
    {
      pattern:'^([a-zA-Z]|[0-9])(\\w|\\-)+@[a-zA-Z0-9]+\\.([a-zA-Z]{2,4})$',
      message:'邮箱格式不正确'
    }
  ],
  remark: [{required: true, message: '备注信息不能为空'}],
  hiredate: [{required: true, message: '入职日期不能为空'}],
});

// 搭配 ref 获取组件实例对象
let doctorForm = ref();
// let doctorForm      // 不需要加后面 ref() 会自动解析出el-form中的 ref='doctorForm'

let emit = defineEmits(['req'])  // 监听父组件的 @req

let submit =async (formEl)=>{
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // 校验成功
      // console.log('submit!')

      doctorInfoForm.value.subId = doctorInfoForm.value.subId[1]

      if (doctorInfoForm.value.id == 0) {
        // 添加
        let res = await insertDoctorInfo(doctorInfoForm.value);
        // console.log(res)  // 查看执行添加后返回的信息

        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '添加成功'
          })
        }
      } else {
        // 修改
        let res = await updateDoctorInfo(doctorInfoForm.value);
        console.log(res)
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message:'修改成功'

          })
        }
      }
    } else {
      // 校验失败
      console.log('error submit!', fields)
    }
  })
  // 关闭表格
  dialogVisible.value = false;
  // 触发父组件中查询医生信息的方法
  emit('req');
}

let newTag = ref('')

const tagPush = ()=>{
  if (newTag.value != '') {
    if (doctorInfoForm.value.tag.includes(newTag.value)) {
      ElMessage({
        type: 'warning',
        message: '不能添加重复标签',
        duration: 1200
      });
    } else {
      doctorInfoForm.value.tag.push(newTag.value);
      newTag.value = '';
    }

  }
}

// 点击叉叉关闭tag标签方法
const closeTag =(index)=>{
  doctorInfoForm.value.tag.splice(index,1);
}

const show = ()=>{
  console.log(doctorInfoForm)
}

// 用来渲染科室部门级联选择器的数据
let options=ref([])

// 获取所有科室门诊数据
const getDeptAndSub = async () => {
  let res = await selectDeptAndSub();
  console.log(res)   // 查看服务端获取的科室和部门的数据
  // 获取返回数据对象中的所有属性
  // Object.keys 会把对象中所有的属性 以数据的形式返回
  let attArr = Object.keys(res.result);
  // console.log(attArr)  // 打印所有的属性
  // 通过数组 map 方法 改造数据格式
   options.value = attArr.map((item,index)=>{
    return{
      subId:item, // item 数据对象中的 key 值    我觉得这个是index
      subName:item,
      children:res.result[item]
    }
  })
  // console.log(options)
};

// 门诊改变时 打印跟着变
const change = ()=>{
  console.log(doctorInfoForm.value.subId)
}


onMounted(()=>{
  getDeptAndSub()
})

</script>

<style lang="scss" scoped>
.dialog{
  .el-form-item{
    margin-right: 15px;
    .add_tag{
      margin-right: 10px;
    }
  }
}
</style>